<template>
    <UserHeader></UserHeader>
    <div class="sticky top-[6.5rem] z-10">
        <div
            class="relative bg-white p-3 mx-10 my-2 h-full border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <el-page-header :icon="ArrowLeft" title="返回个人主页" @back="goUserPersonIndex">
                <template #content>
                    <span class="text-large font-600 mr-3"> 用户信息管理 </span>
                </template>
            </el-page-header>
        </div>
    </div>
    <main class="pt-4 pb-4 pl-10 pr-10">
        <div class="grid grid-cols-4 gap-7">
            <!-- 游标栏 -->
            <div class="col-span-4 hidden order-2 lg:block md:col-span-1 mb-3 md:order-1 animate__animated animate__fadeInUp">
                <div class="fixed sticky top-[11rem]">
                    <div
                        class="relative border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <div id="default-sidebar"
                            class="left-0 z-40 relative h-auto transition-transform -translate-x-full sm:translate-x-0"
                            aria-label="Sidebar">
                            <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
                                <ul class="space-y-2 font-medium">
                                    <li>
                                        <a @click="goPersonalCenter"
                                            class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                            <svg t="1734269152954"
                                                class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                p-id="4337" width="200" height="200">
                                                <path
                                                    d="M714.752 952.32L620.544 880.64H110.592c-61.44 0-110.592-49.152-110.592-110.592V274.432C0 212.992 49.152 163.84 110.592 163.84h802.816c61.44 0 110.592 49.152 110.592 110.592v495.616c0 61.44-49.152 110.592-110.592 110.592h-108.544v-61.44h108.544c26.624 0 49.152-22.528 49.152-49.152V274.432c0-26.624-22.528-49.152-49.152-49.152H110.592C83.968 225.28 61.44 247.808 61.44 274.432v495.616C61.44 796.672 83.968 819.2 110.592 819.2h530.432l110.592 83.968-36.864 49.152z"
                                                    fill="#3988FF" p-id="4338"></path>
                                                <path
                                                    d="M163.84 266.24h266.24c34.816 0 61.44 26.624 61.44 61.44v389.12c0 34.816-26.624 61.44-61.44 61.44H163.84c-34.816 0-61.44-26.624-61.44-61.44V327.68c0-34.816 26.624-61.44 61.44-61.44z"
                                                    fill="#DAE9FF" p-id="4339"></path>
                                                <path
                                                    d="M727.04 450.56h-165.888c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72h165.888c16.384 0 30.72 14.336 30.72 30.72s-12.288 30.72-30.72 30.72z"
                                                    fill="#3889FF" p-id="4340"></path>
                                                <path
                                                    d="M851.968 552.96H540.672c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h309.248c12.288 0 20.48 8.192 20.48 20.48 2.048 12.288-8.192 20.48-18.432 20.48zM851.968 655.36H540.672c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h309.248c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-18.432 20.48zM235.52 471.04c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72zM245.76 552.96c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48 20.48 8.192 20.48 20.48c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z"
                                                    fill="#3988FF" p-id="4341"></path>
                                            </svg>
                                            <span class="flex-1 ms-3 whitespace-nowrap">个人资料</span>
                                            <span
                                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">用户</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a @click="goCountCenter"
                                            class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                            <svg t="1734269335329"
                                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                p-id="12476" width="200" height="200">
                                                <path
                                                    d="M992.385489 749.962773a46.247802 46.247802 0 0 0-43.558296-40.927259h-1.87096a28.649081 28.649081 0 0 1-28.707549-28.707548 40.927258 40.927258 0 0 1 2.572571-10.758022 50.632865 50.632865 0 0 0-17.540254-62.03403l-2.046363-1.520155L846.392112 575.788055l-2.046362-0.526207a56.245746 56.245746 0 0 0-20.522097-4.092726 54.667123 54.667123 0 0 0-38.471623 15.903163 76.007765 76.007765 0 0 1-19.995889 14.32454 27.947471 27.947471 0 0 0-13.330592-14.32454 422.25237 422.25237 0 0 0-87.701268-38.939363 294.851662 294.851662 0 1 0-299.35366 0.526208 491.127098 491.127098 0 0 0-336.772867 397.286742 33.034144 33.034144 0 0 0 32.274066 36.893 32.157131 32.157131 0 0 0 32.274067-27.655133 426.812835 426.812835 0 0 1 421.550759-365.714286 418.159644 418.159644 0 0 1 108.691104 14.32454l-6.139089 3.098778-2.046362 1.520156a51.509878 51.509878 0 0 0-17.949527 62.03403 27.538198 27.538198 0 0 1 2.572571 10.758022 28.649081 28.649081 0 0 1-28.707548 28.707548h-1.520156a46.423204 46.423204 0 0 0-44.610711 40.927258 303.095581 303.095581 0 0 0-4.618933 46.130867 381.032774 381.032774 0 0 0 4.618933 46.130867 46.247802 46.247802 0 0 0 43.558296 40.927258h2.046363a28.649081 28.649081 0 0 1 28.707548 28.707548 40.927258 40.927258 0 0 1-2.57257 10.758022 50.632865 50.632865 0 0 0 17.540253 62.03403l1.520156 1.520156 54.316318 30.227703 2.046363 0.526208a56.245746 56.245746 0 0 0 20.522097 4.092726 53.322371 53.322371 0 0 0 38.939362-16.429371 78.463401 78.463401 0 0 1 24.614823-17.540254 60.16307 60.16307 0 0 1 25.14103 17.540254 54.550188 54.550188 0 0 0 39.991778 17.540253 56.245746 56.245746 0 0 0 20.522096-4.092726l2.046363-0.526207 56.362682-31.280119 1.520155-1.520155a50.808268 50.808268 0 0 0 17.540253-62.03403 27.538198 27.538198 0 0 1-2.57257-10.758022 28.649081 28.649081 0 0 1 28.707548-28.707549h1.870961a45.487724 45.487724 0 0 0 43.558296-40.927258 303.095581 303.095581 0 0 0 4.618933-46.130866 172.128354 172.128354 0 0 0-2.57257-47.183282zM285.454805 295.260934a229.134178 229.134178 0 1 1 229.134179 229.134178A229.075711 229.075711 0 0 1 285.454805 295.260934z m655.654676 536.20555a81.854516 81.854516 0 0 0-76.35857 81.503711 79.515816 79.515816 0 0 0 6.665296 29.759964l-48.177229 27.187393h-0.526208a104.013703 104.013703 0 0 0-63.554185-34.32043 105.650794 105.650794 0 0 0-63.554185 33.85269h-0.526208l-47.183282-26.661186a79.398881 79.398881 0 0 0-69.693274-111.088272 210.483042 210.483042 0 0 1-4.092726-35.080507 176.571885 176.571885 0 0 1 4.092726-35.080507 81.854516 81.854516 0 0 0 76.417038-81.854516 79.515816 79.515816 0 0 0-6.665296-29.759964l41.511933-23.094667a231.122074 231.122074 0 0 1 29.759963 15.376956 29.584561 29.584561 0 0 0 8.71166 3.098778 71.271897 71.271897 0 0 0 32.274066 9.237867 102.318145 102.318145 0 0 0 62.03403-31.806327h0.526208l47.651022 26.661186a79.398881 79.398881 0 0 0 69.693274 111.088272 210.483042 210.483042 0 0 1 4.092726 35.080507 284.093639 284.093639 0 0 1-3.098779 35.899052z m0 0"
                                                    fill="#409EFF" p-id="12477"></path>
                                                <path
                                                    d="M758.57391 707.924632a88.695215 88.695215 0 1 0 88.695215 88.695215 88.695215 88.695215 0 0 0-88.695215-88.695215z m0 124.594267a35.899052 35.899052 0 1 1 35.899052-35.899052 35.665182 35.665182 0 0 1-35.899052 35.899052z m0 0"
                                                    fill="#409EFF" p-id="12478"></path>
                                            </svg>
                                            <span class="flex-1 ms-3 whitespace-nowrap">账号设置</span>
                                            <span
                                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">账号</span>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 内容栏 -->
            <div class="col-span-4 order-1 h-full md:col-span-3 md:order-2 animate__animated animate__fadeInUp">
                <div
                    class="relative bg-white h-full border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <div class="pt-7 pl-5">
                        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-400">
                            <img :src="blogSettingsStore.blogSettings.miniLogo" class="h-10 mr-2 inline"
                                alt="wjblog Logo" />
                            账号设置
                        </h3>
                    </div>
                    <el-divider />
                    <div class="text-base pl-7 font-medium dark:text-gray-400">
                        <div
                            class="flex items-center pt-2 pb-2 pl-4 pr-12 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                            <svg t="1734337797942"
                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9056"
                                width="200" height="200">
                                <path
                                    d="M831.050 146.15h-638.1c-66.375 0-119.7 53.55-119.7 119.7v492.3c0 65.92 53.55 119.7 119.7 119.7h638.325c66.15 0 119.7-53.545 119.7-119.7v-492.525c-0.225-66.15-53.775-119.475-119.925-119.475zM636.425 465.425l270.238-212.85c0.67 4.275 1.125 8.55 1.125 13.050v492.3c0 10.125-1.8 19.795-5.4 28.795l-265.963-321.295zM196.105 189.125h632.033c24.75 0 47.25 11.25 61.875 29.25l-382.963 294.3-372.595-294.525c14.661-17.779 36.691-29.026 61.348-29.026 0.106 0 0.213 0 0.319 0.001zM121.405 786.725c-3.375-9-5.4-18.67-5.4-28.795v-492.305c0-4.5 0.45-9 1.125-13.275l270.67 213.295-266.395 321.080zM192.95 834.433c-19.125 0-36.675-3.613-50.4-14.633l276.3-330.533 75.375 67.733c7.2 5.85 17.55 5.85 24.525 0.225l85.95-67.275 276.3 330.075c-13.725 11.025-31.275 15.088-50.175 15.088l-637.875-0.68z"
                                    fill="#4E8CEE" p-id="9057"></path>
                                <path
                                    d="M195.979 188.45h632.038c24.75 0 47.25 11.25 61.875 29.25l-382.958 294.3-372.605-294.525c14.625-17.775 36.675-29.025 61.65-29.025z"
                                    fill="#BAD4FF" p-id="9058"></path>
                            </svg>
                            <span class="flex-1 ms-3 whitespace-nowrap">邮箱</span>
                            <span v-if="userAccount && userAccount.mail" class="flex-1 whitespace-nowrap">{{
                                userAccount.mail }}</span>
                            <span v-else class="flex-1 whitespace-nowrap"></span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span class="flex-1 whitespace-nowrap"></span>

                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleEditMailBtn" type="primary" round>换绑</el-button>
                            </span>
                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button type="danger" round plain disabled>解绑</el-button>
                            </span>
                        </div>
                    </div>

                    <el-divider />
                    <div class="text-base pl-7 font-medium dark:text-gray-400">
                        <div
                            class="flex items-center pt-2 pb-2 pl-4 pr-12 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                            <svg t="1734337924035"
                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17114"
                                width="200" height="200">
                                <path
                                    d="M512 2.56C231.424 2.56 3.584 229.888 3.584 510.976S231.424 1018.88 512 1018.88s508.416-227.328 508.416-508.416S793.088 2.56 512 2.56z m0 941.568c-239.616 0-433.664-194.048-433.664-433.664S272.384 76.8 512 76.8s433.664 194.048 433.664 433.664-194.048 433.664-433.664 433.664z"
                                    fill="#4E8CEE" p-id="17115"></path>
                                <path
                                    d="M396.288 459.776c-13.312 0-24.064-10.752-24.064-24.064v-45.056c0-77.312 62.976-140.8 140.8-140.8 77.312 0 140.8 62.976 140.8 140.8 0 13.312-10.752 24.064-24.064 24.064s-24.064-10.752-24.064-24.064c0-50.688-41.472-92.16-92.16-92.16s-92.16 41.472-92.16 92.16V435.2c-1.024 13.824-11.776 24.576-25.088 24.576z"
                                    fill="#4E8CEE" p-id="17116"></path>
                                <path
                                    d="M643.072 771.584H380.928c-32.768 0-59.904-26.624-59.904-59.904V496.128c0-32.768 26.624-59.904 59.904-59.904h262.656c32.768 0 59.904 26.624 59.904 59.904v215.04c-0.512 33.792-26.624 60.416-60.416 60.416z m-262.144-286.72c-6.144 0-11.264 5.12-11.264 11.264V711.68c0 6.144 5.12 11.264 11.264 11.264h262.656c6.656 0 11.264-5.12 11.264-12.288v-215.04c0-6.144-5.12-11.264-11.264-11.264H380.928z"
                                    fill="#4E8CEE" p-id="17117"></path>
                                <path
                                    d="M512.512 522.752c-24.064 0-44.544 19.968-44.544 44.544v12.288c0 18.432 11.776 34.816 28.16 41.472v51.712c0 8.704 7.168 16.384 16.384 16.384 8.704 0 16.384-7.168 16.384-16.384v-51.712c16.384-6.656 28.16-22.528 28.16-41.472v-12.288c0-24.064-20.48-44.544-44.544-44.544z"
                                    fill="#4E8CEE" p-id="17118"></path>
                            </svg>
                            <span class="flex-1 ms-3 whitespace-nowrap">密码</span>
                            <span class="flex-1 whitespace-nowrap">********</span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleEditPasswordBtn" type="primary" round>修改</el-button>
                            </span>
                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button type="danger" round plain disabled>删除</el-button>
                            </span>
                        </div>
                    </div>

                    <el-divider />
                    <div class="text-base pl-7 font-medium dark:text-gray-400">
                        <div
                            class="flex items-center pt-2 pb-2 pl-4 pr-12 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                            <svg t="1734338247109"
                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22795"
                                width="200" height="200">
                                <path
                                    d="M271.685818 26.205091l479.232 0.139636c15.825455 0 30.626909 6.144 41.751273 17.314909 11.170909 11.170909 17.314909 25.972364 17.314909 41.751273l-0.232727 853.364364c0 32.535273-26.530909 59.019636-59.112728 59.019636l-479.232-0.139636c-32.535273 0-59.019636-26.530909-59.019636-59.066182L212.619636 85.224727c0-32.535273 26.530909-59.019636 59.066182-59.019636z m0-26.205091C224.581818 0 186.414545 38.167273 186.414545 85.224727L186.181818 938.589091c0 47.104 38.167273 85.271273 85.224727 85.271273L750.685091 1024c47.104 0 85.271273-38.167273 85.271273-85.224727l0.232727-853.364364c0-47.104-38.167273-85.271273-85.271273-85.271273L271.685818 0z m22.155637 109.893818l429.986909 0.139637-0.186182 695.761454-429.986909-0.093091 0.186182-695.808z m-26.205091-26.205091l-0.186182 748.218182 482.397091 0.139636 0.186182-748.218181L267.636364 83.688727z m240.965818 806.586182a25.320727 25.320727 0 0 1 25.460363 25.460364 25.506909 25.506909 0 1 1-25.460363-25.460364z m0-26.205091a51.665455 51.665455 0 0 0 0 103.330909 51.665455 51.665455 0 0 0 0-103.330909z"
                                    fill="#4E8CEE" p-id="22796"></path>
                            </svg>
                            <span class="flex-1 ms-3 whitespace-nowrap">手机号</span>
                            <span v-if="userAccount && userAccount.phoneNumber" class="flex-1 whitespace-nowrap">{{
                                userAccount.phoneNumber }}</span>
                            <span v-else class="flex-1 whitespace-nowrap">未绑定</span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span v-if="userAccount && userAccount.phoneNumber"
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full  dark:text-gray-300">
                                <el-button @click="handleEditPhoneBtn" type="primary" round>换绑</el-button>
                            </span>
                            <span v-else
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleAddPhoneBtn" type="primary" round>绑定</el-button>
                            </span>
                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleUnbindPhoneBtn" type="danger" round plain>解绑</el-button>
                            </span>
                        </div>
                    </div>
                    <el-divider />
                    <div class="text-base pl-7 font-medium dark:text-gray-400">
                        <div
                            class="flex items-center pt-2 pb-2 pl-4 pr-12 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                            <svg t="1734338358438"
                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24077"
                                width="200" height="200">
                                <path
                                    d="M814.545455 751.895273c13.684364 6.050909 28.578909 3.351273 42.914909 0 64.512-14.894545 101.469091-88.157091 43.008-221.184-20.666182-47.010909-49.338182-92.16-71.68-117.946182 11.170909-32.768 3.165091-79.406545-14.336-88.436364C814.545455 134.050909 680.122182 0 513.396364 0 346.298182 0.093091 211.688727 134.050909 211.688727 324.235636c-17.501091 9.122909-25.6 55.761455-14.429091 88.436364-22.341818 25.786182-51.013818 71.028364-71.773091 118.039273-58.647273 133.12-21.504 206.289455 43.101091 221.184 14.336 3.351273 29.323636 6.050909 43.101091 0-33.419636 21.597091-43.101091 40.308364-43.101091 73.728 0 68.887273 57.716364 118.039273 186.740364 118.039272 56.133818 0 110.312727-18.152727 143.732364-44.218181 5.399273 0.279273 23.272727 0.279273 28.672 0 33.326545 26.065455 87.412364 44.218182 143.36 44.218181 128.837818 0 186.368-49.152 186.368-118.039272 0-33.512727-9.681455-52.130909-43.008-73.728zM785.687273 457.076364c21.410909 14.708364 49.710545 69.632 57.344 88.436363 35.467636 80.430545 37.236364 139.357091 14.336 147.549091-12.008727 4.375273-34.629818 2.606545-43.380364-8.471273-1.117091-0.930909-24.762182-20.666182-42.635636 8.378182l-4.096 6.795637c-7.819636 12.660364-15.639273 25.413818-24.576 37.515636-9.029818 12.288 0.744727 38.167273 14.336 44.218182 31.278545 13.684364 43.008 23.272727 43.008 44.218182 0 39.563636-53.248 59.019636-129.024 59.019636-49.152 0-75.869091-7.074909-100.352-29.509818-17.687273-16.104727-37.608727-15.825455-52.130909-15.453091H508.276364c-14.708364-0.279273-34.722909-0.651636-52.317091 15.453091-24.576 22.341818-51.293091 29.509818-100.538182 29.509818-76.055273 0-129.396364-19.456-129.396364-59.019636 0-21.038545 11.822545-30.533818 43.101091-44.218182 13.684364-5.957818 23.458909-31.930182 14.429091-44.218182a516.096 516.096 0 0 1-24.669091-37.515636l-4.096-6.702546c-17.966545-29.137455-41.518545-9.495273-42.728727-8.564363-8.750545 11.170909-31.464727 13.032727-43.473455 8.564363-22.900364-8.192-21.224727-67.025455 14.336-147.456 7.726545-18.897455 36.026182-73.821091 57.437091-88.436363 13.032727-10.891636 16.756364-24.762182 14.429091-44.311273l-0.186182-1.024c-4.840727-29.416727-8.005818-48.779636 11.822546-68.980364 4.561455-8.005818 2.978909-22.714182 2.978909-19.362909 0-152.296727 101.469091-264.564364 243.898182-264.564364 142.336 0 243.525818 112.267636 243.525818 264.564364 0-3.351273-1.582545 11.357091 2.978909 19.362909 19.828364 20.200727 16.663273 39.563636 11.822545 68.980364l-0.186181 0.930909c-2.234182 19.549091 1.303273 33.512727 14.336 44.311273z"
                                    fill="#4E8CEE" p-id="24078"></path>
                                <path
                                    d="M610.304 378.135273c14.894545-13.591273 33.047273-13.312 46.359273 0.651636 12.846545 14.522182 11.357091 33.047273-3.723637 46.545455-82.478545 75.217455-206.661818 72.424727-277.224727-5.957819-12.846545-14.429091-11.170909-32.861091 3.723636-46.545454 14.708364-13.870545 33.140364-13.125818 46.08 1.303273 47.010909 52.410182 129.582545 53.992727 184.785455 4.002909z"
                                    fill="#4E8CEE" p-id="24079"></path>
                            </svg>
                            <span class="flex-1 ms-3 whitespace-nowrap">QQ号</span>
                            <span v-if="userAccount && userAccount.qqId" class="flex-1 whitespace-nowrap">{{
                                userAccount.qqId }}</span>
                            <span v-else class="flex-1 whitespace-nowrap">未绑定</span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span class="flex-1 whitespace-nowrap"></span>
                            <span v-if="userAccount && userAccount.qqId"
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleEditQQBtn" type="primary" round>换绑</el-button>
                            </span>
                            <span v-else
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleAddQQBtn" type="primary" round>绑定</el-button>
                            </span>
                            <span
                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 rounded-full dark:text-gray-300">
                                <el-button @click="handleUnbindQQBtn" type="danger" round plain>解绑</el-button>
                            </span>
                        </div>
                    </div>
                    <el-divider />
                    <div class="p-4 md:p-5">
                        <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
                            role="alert">
                            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path
                                    d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                            </svg>
                            <span class="font-semibold">温馨提示：</span> 如果需要修改昵称，签名，介绍等个人资料信息请到【个人资料】页面进行修改，用户名不可修改。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <FormDialog ref="editEmailDialogRef" title="换绑邮箱" destroyOnClose @submit="onEditEmailSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="mailRules" :model="mailForm" label-width="auto">
            <el-form-item label="原邮箱" prop="oldMail">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="mailForm.oldMail" placeholder="请输入邮箱" clearable disabled />
            </el-form-item>
            <el-form-item label="新邮箱" prop="mail">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="mailForm.mail" placeholder="请输入邮箱" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="mailForm.password" placeholder="请输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="editPasswordDialogRef" title="修改密码" destroyOnClose @submit="onEditPasswordSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="editPasswordRules" :model="passwordForm">
            <el-form-item label="用户名" prop="username" label-width="120px">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="passwordForm.username" placeholder="请输入用户名" clearable disabled />
            </el-form-item>
            <el-form-item label="旧密码" prop="oldPassword" label-width="120px">
                <el-input size="large" type="password" v-model="passwordForm.oldPassword" placeholder="请输入用户旧密码"
                    clearable show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="password" label-width="120px">
                <el-input size="large" type="password" v-model="passwordForm.password" placeholder="请输入新密码" clearable
                    show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword" label-width="120px">
                <el-input size="large" type="password" v-model="passwordForm.rePassword" placeholder="请确认新密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="editPhoneDialogRef" title="换绑手机号" destroyOnClose @submit="onEditPhoneSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="phoneRules" :model="phoneForm" label-width="auto">
            <el-form-item label="原手机号" prop="phoneNumber">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="phoneForm.phoneNumber" placeholder="请完整输入原手机号" clearable />
            </el-form-item>
            <el-form-item label="新手机号" prop="newPhoneNumber">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="phoneForm.newPhoneNumber" placeholder="请输入新手机号" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="phoneForm.password" placeholder="请输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="unbindPhoneDialogRef" title="解绑手机号" destroyOnClose @submit="onUnbindPhoneSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="phoneRules" :model="phoneForm" label-width="auto">
            <el-form-item label="原手机号" prop="phoneNumber">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="phoneForm.phoneNumber" placeholder="请完整输入原手机号" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="phoneForm.password" placeholder="请输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="editQQDialogRef" title="换绑QQ号" destroyOnClose @submit="onEditQQSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="qqRules" :model="qqForm" label-width="auto">
            <el-form-item label="原QQ号" prop="oldQqId">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="qqForm.oldQqId" placeholder="请输入原QQ号" clearable disabled />
            </el-form-item>
            <el-form-item label="QQ号" prop="qqId">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="qqForm.qqId" placeholder="请输入QQ号" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="qqForm.password" placeholder="请完整输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="unbindQQDialogRef" title="解绑QQ号" destroyOnClose @submit="onUnbindQQSubmit">
        <!-- 密码修改表单，包括用户名，旧密码栏，新密码栏，确认密码栏 -->
        <el-form ref="formRef" :rules="qqRules" :model="qqForm" label-width="auto">
            <el-form-item label="原QQ号" prop="oldQqId">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="qqForm.oldQqId" placeholder="请输入原QQ号" clearable disabled />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="qqForm.password" placeholder="请完整输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="addPhoneDialogRef" title="绑定手机号" destroyOnClose @submit="onAddPhoneSubmit">
        <el-form ref="formRef" :rules="addPhoneRules" :model="phoneForm" label-width="auto">
            <el-form-item label="新手机号" prop="newPhoneNumber">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="phoneForm.newPhoneNumber" placeholder="请输入新手机号" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="phoneForm.password" placeholder="请输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <FormDialog ref="addQQDialogRef" title="绑定QQ号" destroyOnClose @submit="onAddQQSubmit">
        <el-form ref="formRef" :rules="addQQRules" :model="qqForm" label-width="auto">
            <el-form-item label="QQ号" prop="qqId">
                <!-- 输入框组件 -->
                <el-input size="large" v-model="qqForm.qqId" placeholder="请输入QQ号" clearable />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input size="large" type="password" v-model="qqForm.password" placeholder="请完整输入登录密码" clearable
                    show-password />
            </el-form-item>
        </el-form>
    </FormDialog>
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue';
import Footer from '@/layouts/frontend/components/Footer.vue';
// 引入 Element Plus 中的用户、锁图标
import { User, Lock, Checked, Avatar, Message, UserFilled, EditPen, ChatRound, Phone, Location, School, Iphone, Sugar, ArrowLeft } from '@element-plus/icons-vue'
import { getUserAccountInfo, getUserDetailInfo, login, unbindUserPhone, unbindUserQq, updateAdminPassword, updateUserEmail, updateUserPersonInfo, updateUserPhone, updateUserQq } from '@/api/admin/user';
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { showMessage, showModel } from '@/composables/utils';
import { getToken, setToken } from '@/composables/auth';
import { useUserStore } from '@/stores/user';
import { useDark, useToggle } from '@vueuse/core'
import { register } from '@/api/frontend/user';
import { uploadFile } from '@/api/frontend/file';
import { useBlogSettingsStore } from '@/stores/blogsettings';
import FormDialog from '@/components/FormDialog.vue';
import UserHeader from '@/layouts/frontend/components/UserHeader.vue';

const blogSettingsStore = useBlogSettingsStore()

const userStore = useUserStore()
const router = useRouter()
const userAccount = ref(null)
const formRef = ref(null)
//表单验证规则
const mailRules = {
    mail: [
        {
            required: true,
            message: "邮箱不能为空！",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "密码不能为空！",
            trigger: "blur"
        }
    ],
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ]
}

// 规则校验
const editPasswordRules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        }
    ],
    oldPassword: [
        {
            required: true,
            message: '旧密码不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur',
        },
    ],
    rePassword: [
        {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur',
        },
    ]
}

const phoneRules = {
    phoneNumber: [
        {
            required: true,
            message: '原手机号不能为空',
            trigger: 'blur',
        },
    ],
    newPhoneNumber: [
        {
            required: true,
            message: '新手机号不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur',
        },
    ],
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ]
}
const addPhoneRules = {
    newPhoneNumber: [
        {
            required: true,
            message: '新手机号不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur',
        },
    ],
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ]
}
const addQQRules = {
    qqId: [
        {
            required: true,
            message: '新QQ号不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur',
        },
    ],
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ]
}

const qqRules = {
    oldQqId: [
        {
            required: true,
            message: '原QQ号不能为空',
            trigger: 'blur',
        },
    ],
    qqId: [
        {
            required: true,
            message: '新QQ号不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur',
        },
    ],
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ]
}

// 跳转到个人资料页
const goPersonalCenter = () => {
    router.push({ path: '/safeguard/user/person/center' })
}
// 跳转到账号修改页面
const goCountCenter = () => {
    router.push({ path: '/safeguard/user/count/center' })
}
// 跳转到个人主页
const goUserPersonIndex = () => {
    router.push({ path: '/user/person/' + userStore.userInfo.userId })
}

// 获取用户账户信息
const getUserAccountData = () => {
    // 获取token
    let token = getToken()
    // 获取用户信息
    let userInfo = userStore.userInfo
    // 验证登录状态
    if (token == null || userInfo == null) {
        showMessage("请先登录！", 'error')
        router.push('/user/login')
        return
    }

    // 获取用户个人资料
    getUserAccountInfo().then((res) => {
        if (res.success == true) {
            let data = res.data
            // 将用户信息保存到表单中
            userAccount.value = data
        } else {
            let message = res.message
            showMessage(message, 'error')
        }
    })

}
getUserAccountData()
onMounted(() => {
    getUserAccountData()
})

// 修改用户邮箱
const editEmailDialogRef = ref(null)
const editPasswordDialogRef = ref(null)
const editPhoneDialogRef = ref(null)
const addPhoneDialogRef = ref(null)
const addQQDialogRef = ref(null)
const editQQDialogRef = ref(null)
const unbindPhoneDialogRef = ref(null)
const unbindQQDialogRef = ref(null)
const mailForm = reactive({
    mail: null,
    password: null,
    username: null,
    userId: null,
    oldMail: userAccount.value ? userAccount.value.mail : ''
})

const passwordForm = reactive({
    username: userStore.userInfo.username || '',
    oldPassword: null,
    password: null,
    rePassword: null
})

const phoneForm = reactive({
    newPhoneNumber: null,
    password: null,
    phoneNumber: null,
    userId: userStore.userInfo.userId,
    username: userStore.userInfo.username || ''
})

const qqForm = reactive({
    qqId: null,
    password: null,
    oldQqId: userAccount.value? userAccount.value.qqId : '',
    userId: userStore.userInfo.userId,
    username: userStore.userInfo.username || ''
})

const handleEditMailBtn = () => {
    mailForm.username = userStore.userInfo.username
    mailForm.userId = userStore.userInfo.userId
    mailForm.oldMail = userAccount.value ? userAccount.value.mail : ''
    editEmailDialogRef.value.open()
}
const handleEditPasswordBtn = () => {
    passwordForm.username = userStore.userInfo.username
    editPasswordDialogRef.value.open()
}

const handleEditPhoneBtn = () => {
    phoneForm.username = userStore.userInfo.username
    phoneForm.userId = userStore.userInfo.userId
    editPhoneDialogRef.value.open()
}

const handleAddPhoneBtn = () => {
    phoneForm.username = userStore.userInfo.username
    phoneForm.userId = userStore.userInfo.userId
    addPhoneDialogRef.value.open()
}

const handleAddQQBtn = () => {
    qqForm.username = userStore.userInfo.username
    qqForm.userId = userStore.userInfo.userId
    addQQDialogRef.value.open()
}
const handleEditQQBtn = () => {
    qqForm.username = userStore.userInfo.username
    qqForm.userId = userStore.userInfo.userId
    qqForm.oldQqId = userAccount.value? userAccount.value.qqId : ''
    editQQDialogRef.value.open()
}
const handleUnbindPhoneBtn = () => {
    // 验证是否绑定手机号
    if (userAccount.value ? (!userAccount.value.phoneNumber || userAccount.value.phoneNumber == '') : true) {
        showMessage('您还未绑定手机号！无法进行该操作！', 'error')
        return
    }
    phoneForm.username = userStore.userInfo.username
    phoneForm.userId = userStore.userInfo.userId
    unbindPhoneDialogRef.value.open()
}
const handleUnbindQQBtn = () => {
    // 验证是否绑定qq   
    if (userAccount.value ? (!userAccount.value.qqId || userAccount.value.qqId == '') : true) {
        showMessage('您还未绑定QQ号！无法进行该操作！', 'error')
        return
    }
    qqForm.username = userStore.userInfo.username
    qqForm.userId = userStore.userInfo.userId
    qqForm.oldQqId = userAccount.value ? userAccount.value.qqId : ''
    unbindQQDialogRef.value.open()
}

const onEditEmailSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 提交表单
            updateUserEmail(mailForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！', 'success')
                    // 关闭弹窗
                    editEmailDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

const onEditPasswordSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 验证密码与确认密码是否一致
            if (passwordForm.password != passwordForm.rePassword) {
                showMessage('密码与确认密码不一致！', 'error')
                return
            }
            // 判断原密码与新密码是否一致
            if (passwordForm.oldPassword == passwordForm.password) {
                showMessage('原密码与新密码不能一致！', 'error')
                return
            }
            // 提交表单
            updateAdminPassword(passwordForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！请重新登录！','success')
                    // 关闭弹窗
                    editPasswordDialogRef.value.close()
                    // 退出登录
                    userStore.exitLogin()
                    // 跳转到登录页面
                    router.push('/user/login')
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

// 提交修改手机表单
const onEditPhoneSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 判断原手机号与新手机号是否一致
            if (phoneForm.phoneNumber == phoneForm.newPhoneNumber) {
                showMessage('原手机号与新手机号不能一致！', 'error')
                return
            }
            // 提交表单
            updateUserPhone(phoneForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！','success')
                    // 关闭弹窗
                    editPhoneDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

// 提交修改QQ号表单
const onEditQQSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 判断原QQ号与新QQ号是否一致
            if (qqForm.qqId == qqForm.oldQqId) {
                showMessage('原QQ号与新QQ号不能一致！', 'error')
                return
            }
            // 提交表单
            updateUserQq(qqForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！','success')
                    // 关闭弹窗
                    editQQDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        }
    })
}

// 绑定手机号提交表单
const onAddPhoneSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            
            // 提交表单
            updateUserPhone(phoneForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！','success')
                    // 关闭弹窗
                    addPhoneDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

// 绑定QQ提交表单
const onAddQQSubmit = () => {
    // 验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 提交表单
            updateUserQq(qqForm).then((res) => {
                if (res.success == true) {
                    showMessage('修改成功！','success') 
                    // 关闭弹窗
                    addQQDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

// 解绑手机
const onUnbindPhoneSubmit = () => {
    //验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 提交表单
            unbindUserPhone(phoneForm).then((res) => {
                if (res.success == true) {
                    showMessage('解绑成功！','success')
                    // 关闭弹窗
                    unbindPhoneDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

// 解绑qq
const onUnbindQQSubmit = () => {
    //验证表单
    formRef.value.validate((valid) => {
        if (valid) {
            // 提交表单
            unbindUserQq(qqForm).then((res) => {
                if (res.success == true) {
                    showMessage('解绑成功！','success')
                    // 关闭弹窗
                    unbindQQDialogRef.value.close()
                    // 刷新用户账户信息
                    getUserAccountData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        } else {
            showMessage('请检查表单是否填写完整！', 'error')
        }
    })
}

//登录加载按钮
const loading = ref(false)
</script>